<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新标签页</title>
    
    <!-- 安全性和隐私性优化 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; connect-src 'self' https: wss:; font-src 'self' data: https:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="X-XSS-Protection" content="1; mode=block">
    <meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains; preload">
    <meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=(), payment=(), usb=()">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="robots" content="noindex, nofollow, nosnippet, noarchive">
    
    <!-- 性能优化 -->
    <meta name="theme-color" content="#0078d4">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://api.openweathermap.org">
    
    <!-- 样式表预加载 -->
    <link rel="preload" href="styles.css" as="style">
    <link rel="stylesheet" href="styles.css">
    
    <!-- 图标优化 -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>">
    
    <!-- PWA支持 -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="新标签页">
    <meta name="msapplication-TileColor" content="#0078d4">
    <meta name="msapplication-tap-highlight" content="no">
</head>
<body>
    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle" onclick="toggleSidebar('left')">☰</button>
    <button class="sidebar-toggle right" onclick="toggleSidebar('right')">⚙️</button>
    
    <!-- 侧边栏缩进按钮 -->
    <button class="sidebar-collapse-btn left" onclick="toggleSidebarCollapse('left')" title="缩进/展开左侧栏">◀</button>
    <button class="sidebar-collapse-btn right" onclick="toggleSidebarCollapse('right')" title="缩进/展开右侧栏">▶</button>
    
    <!-- 左侧边栏 -->
    <div class="left-sidebar">
        <div class="sidebar-section">
            <h3>学术文献搜索</h3>
            <div class="academic-tools">
                <div class="academic-tool-card" onclick="openAcademicTool('cnki')">
                    <div class="tool-icon">📚</div>
                    <div class="tool-name">知网CNKI</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('wanfang')">
                    <div class="tool-icon">📖</div>
                    <div class="tool-name">万方数据</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('vip')">
                    <div class="tool-icon">📄</div>
                    <div class="tool-name">维普网</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('scholar')">
                    <div class="tool-icon">🎓</div>
                    <div class="tool-name">Google Scholar</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('pubmed')">
                    <div class="tool-icon">🧬</div>
                    <div class="tool-name">PubMed</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('ieee')">
                    <div class="tool-icon">⚡</div>
                    <div class="tool-name">IEEE Xplore</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('arxiv')">
                    <div class="tool-icon">🔬</div>
                    <div class="tool-name">arXiv</div>
                </div>
                <div class="academic-tool-card" onclick="openAcademicTool('researchgate')">
                    <div class="tool-icon">🔗</div>
                    <div class="tool-name">ResearchGate</div>
                </div>
            </div>
        </div>
        
        <div class="sidebar-section">
            <h3>AI 工具</h3>
            <div class="ai-tools">
                <div class="ai-tool-card" onclick="openAITool('chatgpt')">
                    <div class="tool-icon">🤖</div>
                    <div class="tool-name">ChatGPT</div>
                </div>
                <div class="ai-tool-card" onclick="openAITool('copilot')">
                    <div class="tool-icon">🧠</div>
                    <div class="tool-name">Copilot</div>
                </div>
                <div class="ai-tool-card" onclick="openAITool('midjourney')">
                    <div class="tool-icon">🎨</div>
                    <div class="tool-name">Midjourney</div>
                </div>
                <div class="ai-tool-card" onclick="openAITool('claude')">
                    <div class="tool-icon">💭</div>
                    <div class="tool-name">Claude</div>
                </div>
                <div class="ai-tool-card" onclick="openAITool('gemini')">
                    <div class="tool-icon">💎</div>
                    <div class="tool-name">Gemini</div>
                </div>
                <div class="ai-tool-card" onclick="openAITool('perplexity')">
                    <div class="tool-icon">🔍</div>
                    <div class="tool-name">Perplexity</div>
                </div>
            </div>
        </div>
        
        <div class="sidebar-section">
            <h3>快捷工具</h3>
            <div class="quick-tools">
                <div class="tool-item" onclick="openTool('calculator')">
                    <span class="tool-icon">🧮</span>
                    <span>计算器</span>
                </div>
                <div class="tool-item" onclick="openTool('translator')">
                    <span class="tool-icon">🌐</span>
                    <span>翻译</span>
                </div>
                <div class="tool-item" onclick="openTool('notes')">
                    <span class="tool-icon">📝</span>
                    <span>记事本</span>
                </div>
                <div class="tool-item" onclick="openTool('timer')">
                    <span class="tool-icon">⏰</span>
                    <span>计时器</span>
                </div>
                <div class="tool-item" onclick="openTool('calendar')">
                    <span class="tool-icon">📅</span>
                    <span>日历</span>
                </div>
                <div class="tool-item" onclick="openTool('color-picker')">
                    <span class="tool-icon">🎨</span>
                    <span>取色器</span>
                </div>
                <div class="tool-item" onclick="openTool('qr-generator')">
                    <span class="tool-icon">📱</span>
                    <span>二维码生成</span>
                </div>
                <div class="tool-item" onclick="openTool('password-generator')">
                    <span class="tool-icon">🔐</span>
                    <span>密码生成器</span>
                </div>
                <div class="tool-item" onclick="openTool('unit-converter')">
                    <span class="tool-icon">📏</span>
                    <span>单位转换</span>
                </div>
                <div class="tool-item" onclick="openTool('base64')">
                    <span class="tool-icon">🔤</span>
                    <span>Base64编码</span>
                </div>
                <div class="tool-item" onclick="openTool('json-formatter')">
                    <span class="tool-icon">📋</span>
                    <span>JSON格式化</span>
                </div>
                <div class="tool-item" onclick="openTool('markdown-editor')">
                    <span class="tool-icon">📄</span>
                    <span>Markdown编辑器</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-sidebar">
        <div class="sidebar-section">
            <h3>个性化</h3>
            <div class="customization-panel">
                <div class="custom-item">
                    <label for="backgroundUpload">自定义背景</label>
                    <input type="file" id="backgroundUpload" accept="image/*" onchange="uploadBackground(event)">
                    <button onclick="resetBackground()" class="reset-bg-btn">重置背景</button>
                </div>
                <div class="custom-item">
                    <label>背景透明度</label>
                    <input type="range" id="backgroundOpacity" min="0.3" max="1" step="0.1" value="1" onchange="adjustBackgroundOpacity(this.value)">
                </div>
            </div>
        </div>
        
        <div class="sidebar-section">
            <h3>书签</h3>
            <div class="bookmarks-panel">
                <div class="bookmark-item" onclick="openBookmark('https://www.microsoft.com')">
                    <span class="bookmark-icon">🏢</span>
                    <span>Microsoft</span>
                </div>
                <div class="bookmark-item" onclick="openBookmark('https://azure.microsoft.com')">
                    <span class="bookmark-icon">☁️</span>
                    <span>Azure</span>
                </div>
                <div class="bookmark-item" onclick="openBookmark('https://docs.microsoft.com')">
                    <span class="bookmark-icon">📚</span>
                    <span>文档</span>
                </div>
                <button onclick="addBookmark()" class="add-bookmark-btn">+ 添加书签</button>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content" id="main-content" role="main" aria-label="主要内容区域">
        <div class="container">
        <!-- 网页标题 -->
        <div class="page-title">
            <h1>哦亲之家专属网页</h1>
        </div>
        
        <!-- 顶部搜索栏 -->
        <div class="search-container">
            <div class="search-box">
                <svg class="search-icon" viewBox="0 0 24 24" width="20" height="20">
                    <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                </svg>
                <input type="text" placeholder="搜索 Web" class="search-input" id="searchInput">
                <div class="search-suggestions" id="searchSuggestions"></div>
            </div>
        </div>

        <!-- 快速访问网站 -->
        <div class="quick-access">
            <h2>快速访问</h2>
            <div class="sites-grid" id="sitesGrid">
                <!-- 网站卡片将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 学习资源 -->
        <div class="learning-section">
            <h2>学习资源</h2>
            <div class="learning-grid">
                <div class="learning-card" onclick="openLearning('coursera')">
                    <div class="learning-icon">🎓</div>
                    <div class="learning-title">Coursera</div>
                    <div class="learning-desc">在线课程平台</div>
                </div>
                <div class="learning-card" onclick="openLearning('edx')">
                    <div class="learning-icon">📚</div>
                    <div class="learning-title">edX</div>
                    <div class="learning-desc">免费在线课程</div>
                </div>
                <div class="learning-card" onclick="openLearning('khan')">
                    <div class="learning-icon">🧮</div>
                    <div class="learning-title">Khan Academy</div>
                    <div class="learning-desc">免费学习平台</div>
                </div>
                <div class="learning-card" onclick="openLearning('bilibili')">
                    <div class="learning-icon">📺</div>
                    <div class="learning-title">哔哩哔哩</div>
                    <div class="learning-desc">学习视频</div>
                </div>
                <div class="learning-card" onclick="openLearning('mooc')">
                    <div class="learning-icon">🏫</div>
                    <div class="learning-title">中国大学MOOC</div>
                    <div class="learning-desc">国内优质课程</div>
                </div>
                <div class="learning-card" onclick="openLearning('xuetangx')">
                    <div class="learning-icon">🎯</div>
                    <div class="learning-title">学堂在线</div>
                    <div class="learning-desc">清华大学平台</div>
                </div>
            </div>
        </div>

        <!-- 开发工具 -->
        <div class="dev-tools-section">
            <h2>开发工具</h2>
            <div class="dev-tools-grid">
                <div class="dev-tool-card" onclick="openDevTool('github')">
                    <div class="dev-tool-icon">🐙</div>
                    <div class="dev-tool-title">GitHub</div>
                    <div class="dev-tool-desc">代码托管平台</div>
                </div>
                <div class="dev-tool-card" onclick="openDevTool('stackoverflow')">
                    <div class="dev-tool-icon">📚</div>
                    <div class="dev-tool-title">Stack Overflow</div>
                    <div class="dev-tool-desc">编程问答社区</div>
                </div>
                <div class="dev-tool-card" onclick="openDevTool('codepen')">
                    <div class="dev-tool-icon">✏️</div>
                    <div class="dev-tool-title">CodePen</div>
                    <div class="dev-tool-desc">在线代码编辑器</div>
                </div>
                <div class="dev-tool-card" onclick="openDevTool('jsfiddle')">
                    <div class="dev-tool-icon">🎻</div>
                    <div class="dev-tool-title">JSFiddle</div>
                    <div class="dev-tool-desc">JavaScript测试</div>
                </div>
                <div class="dev-tool-card" onclick="openDevTool('regex101')">
                    <div class="dev-tool-icon">🔍</div>
                    <div class="dev-tool-title">Regex101</div>
                    <div class="dev-tool-desc">正则表达式测试</div>
                </div>
                <div class="dev-tool-card" onclick="openDevTool('jsonlint')">
                    <div class="dev-tool-icon">📋</div>
                    <div class="dev-tool-title">JSONLint</div>
                    <div class="dev-tool-desc">JSON验证工具</div>
                </div>
            </div>
        </div>

        <!-- 生产力工具 -->
        <div class="productivity-section">
            <h2>生产力工具</h2>
            <div class="productivity-grid">
                <div class="productivity-card" onclick="openProductivity('notion')">
                    <div class="productivity-icon">📝</div>
                    <div class="productivity-title">Notion</div>
                    <div class="productivity-desc">全能笔记工具</div>
                </div>
                <div class="productivity-card" onclick="openProductivity('trello')">
                    <div class="productivity-icon">📋</div>
                    <div class="productivity-title">Trello</div>
                    <div class="productivity-desc">项目管理</div>
                </div>
                <div class="productivity-card" onclick="openProductivity('figma')">
                    <div class="productivity-icon">🎨</div>
                    <div class="productivity-title">Figma</div>
                    <div class="productivity-desc">UI设计工具</div>
                </div>
                <div class="productivity-card" onclick="openProductivity('canva')">
                    <div class="productivity-icon">🖼️</div>
                    <div class="productivity-title">Canva</div>
                    <div class="productivity-desc">图形设计</div>
                </div>
                <div class="productivity-card" onclick="openProductivity('grammarly')">
                    <div class="productivity-icon">✍️</div>
                    <div class="productivity-title">Grammarly</div>
                    <div class="productivity-desc">语法检查</div>
                </div>
                <div class="productivity-card" onclick="openProductivity('deepl')">
                    <div class="productivity-icon">🌐</div>
                    <div class="productivity-title">DeepL</div>
                    <div class="productivity-desc">AI翻译工具</div>
                </div>
            </div>
        </div>

        <!-- 新闻和信息流 -->
        <div class="news-section">
            <div class="news-header">
                <h2>新闻和兴趣</h2>
                <div class="news-controls">
                    <button class="refresh-btn" onclick="refreshNews()">🔄</button>
                    <button class="settings-btn" onclick="toggleSettings()">⚙️</button>
                </div>
            </div>
            <div class="news-grid" id="newsGrid">
                <!-- 新闻卡片将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 天气小部件 -->
        <div class="weather-widget" id="weatherWidget">
            <div class="weather-info">
                <div class="weather-icon">☀️</div>
                <div class="weather-temp">22°C</div>
                <div class="weather-location" onclick="toggleLocationSettings()">北京 📍</div>
            </div>
            <div class="location-settings" id="locationSettings">
                <div class="location-options">
                    <button onclick="autoLocate()" class="location-btn">📍 自动定位</button>
                    <div class="manual-location">
                        <input type="text" id="manualLocation" placeholder="输入城市名称" autocomplete="off">
                        <button onclick="setManualLocation()" class="set-location-btn">设置</button>
                        <div id="citySuggestions" class="city-suggestions"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置面板 -->
        <div class="settings-panel" id="settingsPanel">
            <div class="settings-content">
                <h3>页面设置</h3>
                <div class="setting-item">
                    <label>
                        <input type="checkbox" id="showWeather" checked>
                        显示天气
                    </label>
                </div>
                <div class="setting-item">
                    <label>
                        <input type="checkbox" id="showNews" checked>
                        显示新闻
                    </label>
                </div>
                <div class="setting-item">
                    <label>
                        背景主题：
                        <select id="themeSelect">
                            <option value="light">浅色</option>
                            <option value="dark">深色</option>
                            <option value="auto">跟随系统</option>
                        </select>
                    </label>
                </div>
                <button onclick="toggleSettings()" class="close-settings">关闭</button>
            </div>
        </div>
    </div>
    </div>

    <script src="script.js"></script>
</body>
</html>